/**
	默认情况下, 直接使用 webpack .\src\main.js .\dist\demo.js 就可以实现项目构建
	但是只运行 webpack 命令的话, 那么需要在项目的根目录中, 创建` webpack.config.js `的配置文件
*/

const path = require('path');
/*导入将html在内存中生成的插件*/
const htmlWebpackPlugin = require('html-webpack-plugin');
/*导入vue的插件 -- @15以后的vue-loader需要的插件*/
const VueLoaderPlugin = require('vue-loader/lib/plugin.js');

/*
	注意: 这里使用的是Node中的语法, 向外暴露了一个配置对象
	因为 webpack 这个构建工具, 底层就是使用Node.js开发出来的
*/
module.exports = {
	entry: path.join(__dirname, './src/main.js'),	// 指定处理的JS文件路径
	output: {// 指定输出文件的配置
		path: path.join(__dirname, './dist'), // 指定输出文件的存放路径
		filename: 'bundle.js' // 指定输出文件的名称
	},
	plugins: [ // 插件的数组
		/*将html托管到内存中的插件*/
		new htmlWebpackPlugin({ // 创建一个把 HTML 首页托管到内存中的插件
			template: path.join(__dirname, './src/index.html'), // 把要托管的html文件作为模板， 复制一份托管到内存中
			filename: 'index.html' // 指定将来在内存中复制出来的页面， 名称为 index.html
		}),
		/*vue处理插件*/
		new VueLoaderPlugin()
	],
	module: { // 用来配置 非JS文件对应的loader
		rules: [ // 就是配置 非 JS文件 和 loader 之间的关系
			/*加载器数组中执行顺序是 -> 从后往前执行, 并且执行顺序固定*/
			{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 利用正则表达式来匹配css文件, 然后交由对应的加载器
			/*配置 less 样式文件的加载规则*/
			{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 需要下载对应的 loader 包
			/*配置 scss 样式文件的加载规则*/
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 
			/*配置 图片 加载规则  (可能版本的问题, 所以换了一种使用方式)
				该加载器有两个配置参数:
				其一: limit(极限值), 传入的是图片的大小, 单位Bite字节
					表示: 如果指定了了limit参数, 则只有 图片的大小 < 给定值 的时候, 才会转为base64格式的图片
						否则就不转换, 不转换就是去请求图片路径
				其二: name(文件名), 可以修改文件在url中显示的地址名称
					要求: 只有是http本地地址才能修改, base64不能修改
						[name]表示文件原来的名字
						[ext]表示源文件的后缀
						[hash:长度]表示取该文件hash值的前几位(总长度为32位字符串)*/
			// { test: /\.png|jpg|gif$/, use: 'url-loader?limit=5864&name=[hash:5]-[name].[ext]' },
			{ test: /\.png|jpg|gif$/, use: [{ loader: 'url-loader',
											  options: {
													limit: 10240,
													fallback: {
														loader: 'file-loader',
														options: {
															name: 'img/[name].[contenthash:8].[ext]',
															esModule: false
														}
													},
											  		esModule: false
											  }
											}]},
			/*配置 babel 高级JS语法 的加载器
				exclude参数是用于排除加载已经打包好的 js文件, 不填的话, 那么加载很会慢并且页面会报错*/
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			/*配置 vue 文件 的加载器*/
			{ test: /\.vue$/, use: 'vue-loader' },
			/*配置 样式中字体文件路径的问题*/
			{ test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' }, 
		]
	},
	devtool: 'inline-source-map',  // 加上对应的配置, 防止控制台橙色警告
	devServer: { // 使用内网穿透时需要加的语句
		disableHostCheck: true
	}
}